

<template>
	<mescroll-uni ref="mescrollRef" top="80rpx" @init="mescrollInit" @down="downCallback" @up="upCallback"
		:down="downOption" :up="upOption">
		<view v-if="orderType=='delivery'" class="">
			<view class="ordernavmain">
				<view class="ordereach" :class="activenav == 0 ? 'activenav':''" @click="navclick(0)">全部</view>
				<view class="ordereach" :class="activenav == 1 ? 'activenav':''" @click="navclick(1)">定金</view>
				<view class="ordereach" :class="activenav == 2 ? 'activenav':''" @click="navclick(2)">全款</view>
			</view>
		</view>
		<view v-if="orderType=='serve'" class="">
			<view class="ordernavmain">
				<view class="ordereach news" :class="activenavnew == 'serve_1' ? 'activenav':''"
				 @click="navclick2('serve_1')">总店指派订单</view>
				<view class="ordereach news" :class="activenavnew == 'serve_2' ? 'activenav':''" 
				 @click="navclick2('serve_2')">已指派订单</view>
			</view>
		</view>
		<view class="order-list">
			<view v-for="(item, index) in orderList" :key="index" class="order-item bg-white m-t-20">
				<router-link :to="{path: '/pages/mine/order_details', query: {id: item.id}}">
					<view class="order-header flex row-between">
						<view class="flex">
							<view v-if="item.order_type == 1" class="m-r-10">
								<u-tag text="秒杀" size="mini" type="primary" mode="plain" />
							</view>
							<view v-if="item.order_type == 2" class="m-r-10">
								<u-tag text="拼团" size="mini" type="primary" mode="plain" />
							</view>
							<view v-if="item.order_type == 3" class="m-r-10">
								<u-tag text="砍价" size="mini" type="primary" mode="plain" />
							</view>
							<view v-if="item.delivery_type == 2" class="m-r-10">
								<u-tag text="自提" size="mini" type="success" mode="dark" />
							</view>
						</view>
						<shop-title :shop="item.shop"></shop-title>
						<view :class="item.order_status == 4 ? 'muted' : 'primary'">
							<template v-if="item.delivery_type != 2">
								<!-- {{getOrderStatus(item.order_status)}}333 -->
								{{item.order_status_desc}}
							</template>
							<template v-else>
								{{item.order_status_desc}} 
							</template>
						</view>
					</view>
					<view class="order-con">
						<order-goods :list="item.order_goods" :isJumpGoods="false"></order-goods>
						<view class="flex-s">
							<view class=" flex-start GZbox">
								<image class="avatar" :src="item.user_info.avatar" mode=""></image>
								<view class="nickname">{{item.user_info.nickname}}</view>
							</view>
							<view class="all-price flex row-right">
								<text class="muted xs">共{{item.goods_count}}件商品，实付款：</text>
								<price-format weight="500" :subscript-size="30" :first-size="30" :second-size="30"
									:price="item.order_amount"></price-format>
							</view>
						</view>
					</view>
					<!-- <view class="order-footer flex"v-if="item.cancel_btn || item.delivery_btn || item.take_btn || item.del_btn || item.is_final_status|| item.pay_btn || item.comment_btn || item.pickup_btn"> -->
					<view class="order-footer flex" v-if="item.shop_waite_shipping_btn ||item.shop_serve_btn ||item.shop_final_btn ||item.shop_shipping_btn ||item.shop_install_btn">
						<view style="flex: 1">
							<view class="primary flex sm" v-if="getCancelTime(item.order_cancel_time) > 0">
								<u-count-down separator="zh" 
									:timestamp="getCancelTime(item.order_cancel_time)" :separator-color="colorConfig.primary"
									:color="colorConfig.primary" :separator-size="26" :font-size="26" bg-color="transparent"
									@end="refresh"></u-count-down>
							</view>
							<view class="yybox" v-if="orderType=='serve'&&item.user_order.mobile">
								<view class="flex-start" style="margin-bottom: 10rpx;">
									<view class="yyname">预约人：{{item.user_order.real_name}}</view>
									<view class="">手机号：{{item.user_order.mobile}}</view>
								</view>
								<view class="">到店时间：{{item.user_order.order_time_text}}</view>
							</view>
						</view>
						<view v-if="item.shop_serve_btn">
							<button size="sm" style="border: 1rpx #f5335e solid; color: #f5335e;" class="plain br60 lighter" hover-class="none"
								@tap.stop="serveOrder(item.id)">
								客户指派
							</button>
						</view>
						<view v-if="item.shop_final_btn">
							<button size="sm" style="border: 1rpx #f5335e solid; color: #f5335e;" class="plain br60 lighter" hover-class="none"
								@tap.stop="wkOrder(item.id)">
								确认已支付尾款
							</button>
						</view>
						<view v-if="item.shop_shipping_btn">
							<button size="sm" style="border: 1rpx #f5335e solid; color: #f5335e;" class="plain br60 lighter" hover-class="none"
								@tap.stop="fhOrder(item.id)">
								确认发货
							</button>
						</view>
						<view v-if="item.shop_waite_shipping_btn">
							<button size="sm" style="border: 1rpx #f5335e solid; color: #f5335e;" class="plain br60 lighter" hover-class="none"
								@tap.stop="azOrder(item.id)">
								确认收货
							</button>
						</view>
						<view v-if="item.cancel_btn">
							<button size="sm" class="plain br60 lighter" hover-class="none"
								@tap.stop="cancelOrder(item.id)">
								取消订单
							</button>
						</view>
						<view v-if="item.delivery_btn" @tap.stop="">
							<router-link
								:to="{path: '/bundle/pages/goods_logistics/goods_logistics', query: {id: item.id}}">
								<button size="sm" class="btn plain br60 lighter" hover-class="none">查看物流</button>
							</router-link>
						</view>
                        <view v-if="item.content_btn" @tap.stop="" class="m-l-20">
                        	<router-link
                        		:to="{path: '/pages/mine/order_details', query: {id: item.id}}">
                        		<button size="sm" class="btn plain br60 lighter" hover-class="none">查看内容</button>
                        	</router-link>
                        </view>
                        <view v-if="item.pickup_btn" @tap.stop="" class="m-l-20">
                        	<router-link
                        		:to="{path: '/pages/mine/order_details', query: {id: item.id}}">
                        		<button size="sm" class="btn bg-primary plain br60 white" style="border: none;" hover-class="none">查看取货码</button>
                        	</router-link>
                        </view>
						<view v-if="item.del_btn">
							<button size="sm" class="btn plain br60 lighter" hover-class="none"
								@tap.stop="delOrder(item.id)">
								删除订单
								</button>
						</view>
						<view v-if="item.pay_btn" class="m-l-20">
							<button size="sm" class="btn bg-primary br60 white" @tap.stop="payNow(item.id)">
								立即付款
							</button>
						</view>
						<view v-if="item.is_final_status" class="m-l-20">
							<button size="sm" class="btn bg-primary br60 white" @tap.stop="payfinal(item.id)">
								支付尾款
							</button>
						</view>
						<view v-if="item.comment_btn" class="m-l-20">
							<button size="sm" hover-class="none" class="btn plain btn br60 primary red">
								去评价
							</button>
						</view>
						<view v-if="item.take_btn" class="m-l-20">
							<button size="sm" class="btn plain br60 primary red" hover-class="none"
								@tap.stop="comfirmOrder(item.id)">
								确认收货
								</button>
						</view>
					</view>
				</router-link>
			</view>
		</view>
		<uni-popup ref="center" type="center" >
			<view class="popup_box">
				<view class="text_info">指派对象</view>
				<view class="idinfo margin30 bor-ra" >
					<view class="address-edit">
						<view class="form bg-white">
							<view class="rowbox flex-s" v-for="(item,index) in fwdata">
								<view class="fwname">{{item.name}}</view>
								<view class="assign" @click="assign(item.user_id)">指派</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<order-dialog ref="orderDialog" :order-id="orderId" :type="type" @confirm="confirmDialog"></order-dialog>
		<loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
	</mescroll-uni>
</template>


<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	import {
		// getOrderList,
		finalok,
		deliveryok,
		shippingok,
		installok,
		shoplists,
		cancelOrder,
		delOrder,
		confirmOrder,
		GetShopAdmin,
		serveok,
	} from '@/api/order';
	
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				orderList: [],
				fwdata: [],
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/image/order_null.png',
						tip: '暂无订单~', // 提示
						fixed: true
					}
				},
				showCancel: false,
				type: 0,
				orderId: "",
				showLoading: false,
				activenav: 0,
				activenavnew: 'serve_1',
				typestatus:'all',
			};
		},
		props: {
			orderType: {
				type: String,
			}
		},
		created() {
			uni.$on("refreshorder", () => {
				this.refresh()
			})
			
			uni.$on('payment', params => {
				setTimeout(() => {
					if (params.result) {
						this.$toast({ title: "支付成功" })
						this.refresh()
					} else {
						this.$toast({ title: "支付失败" })
					}
				}, 500)
			})
		},
		destroyed() {
			uni.$off("payment")
			uni.$off("refreshorder")
		},
		methods: {
			async getfinalok(id){
				const {
					data,
					code,
					msg
				} = await finalok({
					order_id: id
				})
				if (code == 1) {
					this.$toast({ title: msg })
					this.downCallback() 
					// this.upCallback({
					// 	num: 1,
					// 	size: 20
					// });
				}
			},
			async getdeliveryok(id){
				const {
					data,
					code,
					msg
				} = await deliveryok({
					order_id: id
				})
				if (code == 1) {
					this.$toast({ title: msg })
					this.downCallback() 
					// this.upCallback({
					// 	num: 1,
					// 	size: 20
					// });
				}
			},
			async getinstallok(id){
				const {
					data,
					code,
					msg
				} = await shippingok({
					order_id: id
				})
				if (code == 1) {
					this.$toast({ title: msg })
					this.downCallback() 
					// this.upCallback({
					// 	num: 1,
					// 	size: 20
					// });
				}
			},
			navclick2(type) { //切换状态
				let that = this;
				that.activenavnew = type
				that.downCallback()
			},
			navclick(type) { //切换状态
				let that = this;
				that.activenav = type;
				if(type==0){
					this.typestatus = 'all'
				}if(type==1){
					this.typestatus = 'deposit'
				}if(type==2){
					this.typestatus = 'total'
				}
				that.downCallback() 
			},
			async confirmDialog() {
				const { type, orderId } = this
				let res = null
				switch (type) {
					case 0:
						res = await cancelOrder(orderId);
						break;
					case 1:
						res = await delOrder(orderId);
						break;
					case 2:
						res = await confirmOrder(orderId);
						break;
					case 3:
						res = this.getfinalok(orderId);
						break;
					case 4:
						res = this.getdeliveryok(orderId);
						break;
					case 5:
						res = this.getinstallok(orderId);
						break;
				}
				
				if (res.code == 1) {
					this.refresh()
					this.$toast({
						title: res.msg
					});
				}
			},
			dialogOpen() {
				this.$refs.orderDialog.open()
			},
			refresh() {
				this.mescroll.resetUpScroll() 
			},
			
			async assign(id){                                 //指派给服务人员
				const {
					data,
					code,
					msg
				} = await serveok({
					serve_user_id: id,
					order_id: this.orderId
				})
				if (code == 1) {
					this.$refs.center.close()
					this.downCallback() 
					// this.upCallback({
					// 	num: 1,
					// 	size: 20
					// });
					this.$toast({
						title: msg
					});

				}
			},
			async serveOrder(id){                                 //获取服务人员
				this.orderId = id
				const {
					data,
					code,
					msg
				} = await GetShopAdmin({
					order_id: id
				})
				if (code == 1) {
					this.fwdata = data
					this.$refs.center.open()
				}
			},
			wkOrder(id) {
				this.orderId = id
				this.type = 3
				this.$nextTick(() => {
					this.dialogOpen();
				});
			},
			fhOrder(id) {
				this.orderId = id
				this.type = 4
				this.$nextTick(() => {
					this.dialogOpen();
				});
			},
			azOrder(id) {
				this.orderId = id
				this.type = 5
				this.$nextTick(() => {
					this.dialogOpen();
				}); 
			},
			delOrder(id) {
				this.orderId = id
				this.type = 1
				this.$nextTick(() => {
					this.dialogOpen();
				});
			},

			comfirmOrder(id) {
				this.orderId = id
				this.type = 2
				this.$nextTick(() => {
					this.dialogOpen();
				});
			},

			cancelOrder(id) {
				this.orderId = id
				this.type = 0
				this.$nextTick(() => {
					this.dialogOpen();
				});
			},
			payfinal(id) {
				uni.navigateTo({
					url: `/bundle/pages/payment/payment?from=${'order'}&order_id=${id}&finaltype=3`
				})
			},
			payNow(id) {
				uni.navigateTo({
					url: `/bundle/pages/payment/payment?from=${'order'}&order_id=${id}`
				})
			},
			
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let {
					orderType,
				} = this;
				console.log('orderType',orderType)
				shoplists({
					page_size: pageSize,
					page_no: pageNum,
					type: orderType=='serve'? this.activenavnew:orderType, 
				}).then(({
					data
				}) => {
					let curPageData = data.list;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					if (page.num == 1) this.orderList = [];
					this.orderList = this.orderList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},



		},
		computed: {
			getOrderStatus() {
				return (status) => {
					let text = ''
					switch (status) {
						case 0:
							text = '待支付';
							break;
						case 1:
							text = '待发货';
							break;
						case 2:
							text = '待收货';
							break;
						case 3:
							text = '已完成';
							break;
						case 4:
							text = '订单已关闭';
							break;
					}
					return text
				}
			},
			getCancelTime() {
				return (time) => time - Date.now() / 1000
			}
		}
	};
</script>
<style lang="scss">
	.rowbox{
		margin-top: 10rpx;
	}
	.order-list {
		min-height: calc(100vh - 80rpx);
		padding: 0 20rpx;
		overflow: hidden;

		.order-item {
			border-radius: 10rpx;

			.order-header {
				height: 80rpx;
				padding: 0 24rpx;
				border-bottom: 1px dotted #E5E5E5;
			}

			.all-price {
				text-align: right;
				padding: 0 24rpx 20rpx;
			}

			.order-footer {
				height: 120rpx;
				background-color: #fff;
				border-top: $-solid-border;
				padding: 0 24rpx;
				padding-top: 10rpx;
				.plain { 
					border: 1px solid #f5335e !important;
					&.red {
						border-color: $-color-primary !important;
					}

				}
			}
		}
	}
	.ordernavmain {
		width: 65%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 18rpx;
	}
	.ordereach {
		position: relative;
		color: #0A0A0A;
		font-size: 28rpx;
		width: 130rpx;
		padding: 4rpx 0;
		text-align: center;
		border-radius: 40rpx;
	}
	.news{
		width: 230rpx;
	}
	.activenav {
		color: #fff;
		background-color: #f6335e;
	}
	.activenav1::after {
		font-size: 34rpx;
		position: absolute;
		left: 50%;
		top: 46rpx;
		content: "";
		display: block;
		width: 60rpx;
		margin-left: -30rpx;
		height: 4rpx;
		background-color: #f3430e;
		border-radius: 2rpx;
	}
	.idinfo{
		background-color: #fff;
		padding: 20rpx;
	}
	.popup_box{
		background-color: #fff;
		border-radius: 14rpx;
		padding: 26rpx 0;
		box-sizing: border-box;
	}
	.text_info{
		text-align: center;
		font-size: 32rpx;
		margin: 20rpx;
		font-weight: bold;
	}
	.fwname{
		width: 400rpx;
		font-size: 30rpx;
	}
	.assign{
		background-color: #f5335e;
		padding: 8rpx 16rpx;
		color:#ffffff;
		border-radius: 8rpx;
		margin-left: 20rpx;
		font-size: 26rpx;
	}
	.yybox{
		font-size: 24rpx;
		color: #878787;
	}
	.yyname{
		margin-right: 38rpx;
	}
	.GZbox{
		margin-bottom: 16rpx;
		margin-left: 20rpx;
	}
	.nickname{
		font-size: 24rpx;
		margin-left: 16rpx;
	}
	.avatar{
		width: 46rpx;
		height: 46rpx;
		border-radius: 50rpx;
	}
</style>
